<template>
    <!-- 为你精选 -->
    <div class="the_one">
        <div class="the_one_text">
            <span>为你精选</span>
        </div>
        <div class="the_one_list">
            <div class="the_one_item" v-for=" item in theoneList">
                <div class="the_one_item_img">
                    <img :src="item.listPicUrl" alt="">
                </div>
                <div class="the_one_name">
                    <a href="https://m.you.163.com/item/detail?id=4002267#/">
                        <img src="https://yanxuan.nosdn.127.net/static-union/16698631101bcf18.png">
                    </a>
                    <span>{{ item.name }}</span>
                </div>
                <div class="the_one_price" >
                    <span style="font-size:6px">￥</span>
                    <span>21.9</span>
                    <span style="font-size:6px;color:#ddd;text-decoration: line-through">￥:21.7</span>
                </div>
                <div class="the_one_active">
                    <div class="left">每日推荐</div>
                    <div class="right">距结束3小时</div>
                </div>
            </div>

        </div>
    </div>
</template>

<script setup lang="ts">
import homeApi from '@/api/home'
import { ref, onMounted, computed } from 'vue'
//获取列表数据
const homeData = ref<any>([])
const data = ref<{
    itemIdsStr: '';
    size: 20;
}>()
//定义初始化数据 
const theoneList = ref<any>([])
const getList = async () => {
    try {
        let result = await homeApi.getTheOneList(data)

        theoneList.value = result.itemList
        // console.log('测试能拿数据不', result.itemList)
    } catch (error) {
        console.log(error)
    }
}

setTimeout(()=>{
// console.log(cardInfo)
},200)

onMounted(() => {
    getList()
})
</script>

<style scoped lang="scss">
//为你精选
.the_one_text {
    font-size: 18px;
    font-weight: bold;
    box-sizing: border-box;
    margin: 0 0 10px 10px;
    display: flex;
}

.the_one {
    width: 100%;
    height: 100%;

    .the_one_list {
        width: 375px;
        height: 302.5px;
        display: flex;
        flex-wrap: wrap;

        .the_one_item {
            width: 187.5px;
            padding: 0 5px 26px 5px;
            box-sizing: border-box;

        }

        .the_one_item_img {
            width: 50%;

            img {
                width: 172.5px;
                height: 172.5px;
                border-radius: 10px;
            }
        }

        .the_one_name {
            width: 172.5px;
            font-size: 14px;
            margin: 6px 0 0 0;
            box-sizing: border-box;

            img {
                width: 15px;
                height: 15px;
            }
        }

        .the_one_price {
            color: rgb(210, 30, 50)
        }

        .the_one_active {
            width: 172.5px;
            height: 23px;
            font-size: 12px;
            line-height: 23px;
            color: #FA1E32;
            display: flex;

            .left {
                width: 60px;
                height: 23px;
                text-align: center;
                border-radius: 12px;
                color: #fff;
                background: #FA1E32;
            }

            .right {
                flex: 1;
            }
        }
    }

}
</style>